<template>
  <div class="header-caotainer">
    <span class="title">欢迎来到用户权限管理系统</span>
    <i class="user">欢迎 {{ userName }}</i>
    <!-- 右侧按钮区域 -->
    <div class="button_right">
      <button type="button" class="btn btn-light" @click="logout">退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
  data() {
    return {
      userName: ''
    }
  },
  methods: {
    logout() {
      // 1.清空token
      window.localStorage.removeItem('token')
      // 2.跳转到登陆页
      this.$router.push('/login')
    }
  },
  created() {
    this.userName = window.localStorage.getItem('username')
  }
}
</script>

<style lang="less" scoped>
.button_right {
  float: right;
}
.title {
  font-size: 20px;
}
.user {
  position: absolute;
  right: 120px;
}
</style>
